<template>
  <section class="ywzl">
    <topTitle
      class="topTitle"
      :showInfo="showInfo"
      @handleLogin="handleLogin"
    ></topTitle>

    <main>
      <section class="left">
        <!-- 城市每日运行评价 -->
        <div class="cspj">
          <div class="title-top">
            <p class="title-color"></p>
            <p class="title-txt">{{ cspjData.tip }}</p>
          </div>
          <div class="con">
            <div class="con-item" v-for="item in cspjData.con" :key="item.id">
              <p class="con-item1">{{ item.title }}</p>
              <p class="con-item2">{{ item.acvCode }}</p>
            </div>
          </div>
        </div>

        <!-- 专题数据 -->
        <div class="ztsj">
          <div class="title-top">
            <p class="title-color"></p>
            <p class="title-txt">{{ ztsjData.tip }}</p>
          </div>
          <div class="con">
            <div class="con-item" v-for="item in ztsjData.con" :key="item.id" @click="ztHandle(item)">
              <div class="con-item2">{{ item.title }}</div>
              <img :src="item.ico_ti" class="con-item3" />
            </div>
          </div>
        </div>

        <!-- 数据分析 -->
        <div class="sjfx">
          <div class="title-top">
            <p class="title-color"></p>
            <p class="title-txt">{{ sjfxData.tip }}</p>
          </div>
          <div class="con">
            <div class="con-item" v-for="item in sjfxData.con" :key="item.id" @click="ztHandle(item)">
              <div class="con-item2">{{ item.title }}</div>
              <img :src="item.ico_ti" class="con-item3" />
            </div>
          </div>
        </div>
      </section>

      <section class="center">
        <!-- 地图 -->
        <div class="mapChart"></div>

        <!-- 大型活动 -->
        <div class="dxhd">
          <div class="title-top">
            <p class="title-color"></p>
            <p class="title-txt">{{ dxhdData.tip }}</p>
          </div>
          <div class="con">
            <div class="con-item" v-for="item in dxhdData.con" :key="item.id" @click="dxhdHandle(item)">
              <img class="con-item1" :src="item.ico" />
              <p class="con-item2">{{ item.title }}</p>
            </div>
          </div>
        </div>

        <!-- 3d全景 -->
        <div class="threeD">
          <div class="con" v-for="item in threeShow" :key="item.id" @click="qxHandle(item)">
            <div class="tip-box">
              <p>{{ item.tip }}</p>
              <el-select
                v-if="item.showJump"
                v-model="threeDVal"
                placeholder="请选择"
                size="small"
                style="width: 50%"
                clearable>
                <el-option v-for="item in threeDValList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
            <div class="ico-box">
              <img :src="item.ico" />
            </div>
          </div>
        </div>
      </section>

      <section class="right">
        <!-- 天气情况 -->
        <div class="tqqk">
          <!-- 城市每日运行评价 -->
          <div class="cspj">
            <div class="title-top">
              <p class="title-color"></p>
              <p class="title-txt">{{ jrtqData.tip }}</p>
            </div>
            <div class="con">
              <div class="con-item" v-for="item in jrtqData.con" :key="item.id">
                <p class="con-item1">{{ item.title }}</p>
                <p class="con-item2">{{ item.acvCode }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 城市之眼 -->
        <div class="cszy">
          <img src="/src/assets/imgs/ywzl/cszy.png" class="cszy_img" />
        </div>

        <!-- 视频中台 -->
        <div class="spzt">
          <div class="title-top">
            <p class="title-color"></p>
            <p class="title-txt">{{ spztData.tip }}</p>
          </div>
          <div class="con"></div>
        </div>

        <!-- 具体视频 -->
        <div class="spfl">
          <div class="con" v-for="item in flsp" :key="item.id">
            <div class="title-top">
              <p class="title-color"></p>
              <p class="title-txt">{{ item.tip }}</p>
            </div>
            <img class="con-item" :src="item.ico" />
          </div>
        </div>
      </section>
    </main>
  </section>
</template>

<script setup>
import { ref, defineAsyncComponent, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import mapDataAll from '../../JSON/gzs.json'
import * as echarts from 'echarts'
const router = useRouter()
const topTitle = defineAsyncComponent(() => import('@/components/publicComponents/topTitle.vue')) // 头部

console.log(echarts, 'echarts')
// ------------ data
// 地图数据
let mapUseData = ref([])

let showInfo = ref({
  title: '一网总览',
  titlePyLegth: -150, // 标题偏移（默认 margin-left, px）
  handlePyLenth: -40, // 操作偏移（默认 margin-top, px）
  showWeather: true, // 是否展示头部天气
  showBackFont: false, // 是否展示返回上一级
  showBackHome: true, // 是否展示返回首页
  showBackLogin: true // 是否展示返回登录页
})

// 城市评价
let cspjData = ref({
  tip: '城市每日运行评价',
  con: [
    { title: '综合评分', acvCode: '94.61', id: 1 },
    { title: '有序评分', acvCode: '95.84', id: 2 },
    { title: '安全评分', acvCode: '89.97', id: 3 },
    { title: '干净评分', acvCode: '96.00', id: 4 }
  ]
})

// 专题数据
let ztsjData = ref({
  tip: '专题数据',
  con: [
    { title: '智慧公园', ico_ti: '/src/assets/imgs/ywzl/wangluo.png', id: 6 },
    { title: '水', ico_ti: '/src/assets/imgs/ywzl/shui.png', id: 1 },
    { title: '电', ico_ti: '/src/assets/imgs/ywzl/dian.png', id: 2 },
    { title: '气', ico_ti: '/src/assets/imgs/ywzl/qi.png', id: 3 },
    { title: '路', ico_ti: '/src/assets/imgs/ywzl/lu.png', id: 4 },
    { title: '卫健', ico_ti: '/src/assets/imgs/ywzl/weijian.png', id: 5 }
  ]
})

// 数据分析
let sjfxData = ref({
  tip: '数据分析',
  con: [
    { title: 'XXX', ico_ti: '/src/assets/imgs/ywzl/jjyx.png', id: 7 },
    { title: 'XXX', ico_ti: '/src/assets/imgs/ywzl/sthj.png', id: 8 },
    { title: 'XXX', ico_ti: '/src/assets/imgs/ywzl/gyjj.png', id: 9 },
    { title: 'XXX', ico_ti: '/src/assets/imgs/ywzl/szjj.png', id: 10 },
    { title: 'XXX', ico_ti: '/src/assets/imgs/ywzl/zhgy.png', id: 11 },
    { title: 'XXX', ico_ti: '/src/assets/imgs/ywzl/whly.png', id: 12 }
  ]
})

// 大型活动
let dxhdData = ref({
  tip: '大型活动',
  con: [
    { title: '重要节点', ico: '/src/assets/imgs/ywzl/zyjd.png', id: 1 },
    { title: '村超', ico: '/src/assets/imgs/ywzl/cc.png', id: 2 },
    { title: '村BA', ico: '/src/assets/imgs/ywzl/cba.png', id: 3 },
    { title: '民族节气', ico: '/src/assets/imgs/ywzl/mzjq.png', id: 4 }
  ]
})

// 3d全景
let threeShow = ref([
  { tip: '3D模型', ico: '/src/assets/imgs/ywzl/threeD.png', showJump: false, id: 1 },
  { tip: '360全景', ico: '/src/assets/imgs/ywzl/qj.png', showJump: true, id: 2 }
])
let threeDVal = ref('')
const threeDValList = ref([])

// 今日天气
let jrtqData = ref({
  tip: '今日天气状况',
  con: [
    { title: '天气情况', acvCode: '18℃', id: 1 },
    { title: '风力', acvCode: '1级', id: 2 },
    { title: '湿度', acvCode: '93%', id: 3 },
    { title: '紫外线', acvCode: '弱', id: 4 }
  ]
})

// 视屏中台
let spztData = ref({
  tip: '视频中台',
  con: {}
})

// 分类视频
let flsp = ref([
  { tip: '景区', ico: '/src/assets/imgs/ywzl/jq.png', id: 1 },
  { tip: '学校', ico: '/src/assets/imgs/ywzl/xx.png', id: 2 },
  { tip: '水库', ico: '/src/assets/imgs/ywzl/sk.png', id: 3 },
  { tip: '广场', ico: '/src/assets/imgs/ywzl/gc.png', id: 4 }
])

// ---------------- 生命周期
onMounted(() => {
  mapUseData.value = mapDataAll // 地图数据
  getInitChart(mapUseData.value)
})

// ------------------ methods

// 地图加载
const getInitChart = (mapVal) => {
  console.log(mapVal, 'mapVal')
  let myChart = echarts.init(document.querySelector('.mapChart'))
  // 注册 echarts 地图
  echarts.registerMap('贵州省', mapVal)
  let option = {
    tooltip: {
      trigger: 'item'
    },
    title: {
      text: '',
      x: 'center'
    },
    geo: {
      map: '贵州省',
      label: {},
      roam: true,
      label: {
        normal: {
          show: true,
          fontSize: '10',
          color: '#fff'
        }
      },
      itemStyle: {
        normal: {
          areaColor: '#00A0E9' // 设置区域的背景色
        },
        emphasis: {
          areaColor: 'red' // 鼠标悬浮区域的背景色
        }
      }
    },
    itemStyle: {
      normal: {
        areaColor: '#00A0E9' // 设置区域的背景色
      },
      emphasis: {
        areaColor: 'red' // 鼠标悬浮区域的背景色
      }
    },
    series: [
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        rippleEffect: {
          brushType: 'stroke'
        },
        symbolSize: function (val, params) {
          return 8
        },
        data: []
      }
    ]
  }

  myChart.setOption(option)
  myChart.on('click', (params) => {
    window.open('#/qdnUomc')
  })
}

// 专题数据点击
const ztHandle = (item) => {
  window.open('#/wisdomPark')
}
// 返回登录
const handleLogin = () => {
  router.replace('/login')
}
</script>

<style lang="less" scoped>
.ywzl {
  .width_height(100vw, 100vh);
  box-sizing: border-box;
  background-image: url('/src/assets/imgs/ywzl/ywzl_bg.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  main {
    .width_height((100vw), calc(100vh - 100px));
    .D_J_A(space-between, center);
    padding: 0 10px;

    .left,
    .center,
    .right {
      .width_height(33%, 100%);
      // background-color: rgba(255, 255, 255, 0.1);
      padding: 0 0.1%;
    }
    // 左边
    .left {
      .D_F_J_A(column, center, center);
      //城市每日运行评价
      .cspj {
        .width_height(100%, 50%);

        .con {
          .width_height(100%, 65%);
          padding: 0 1%;
          .D_J(space-between);

          .con-item {
            .width_height(24%, 85%);
            background-color: rgba(255, 255, 255, 0.4);
            border-radius: 10px;
            border: 1px solid;
            border-color: #33d2f8;

            .con-item2,
            .con-item1 {
              .width_height(100%, 30%);
              text-align: center;
              font-size: 16px;
            }
            .con-item1 {
              font-weight: 900;
              margin: 10% 0 0 0;
              color: #ffffff;
            }
            .con-item2 {
              color: #33d2f8;
              margin: 2% 0 0 0;
            }
          }
        }
      }

      // 基础数据
      .jcsj {
        .width_height(100%, 100%);
        .con {
          .width_height(100%, 60%);
          padding: 0 1%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          .con-item {
            .width_height(24.5%, 65%);
            background-color: rgba(5, 71, 119, 0.8);
            color: #ffffff;
            margin: 1% 0 0 0;
            padding: 10px;
            .con-item1 {
              .width_height(100%, 20%);
              text-align: center;
              font-size: 16px;
              font-weight: 600;
              margin-bottom: 10px;
            }

            .con-item3,
            .con-item4 {
              font-size: 10px;
            }

            .con-item3 {
              .width_height(100%, 200%);
              text-align: center;
              margin: 22% 0 0 0;
            }
            .con-item4 {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              margin: 2% 0 0 0;
            }
            .con-item4:hover {
              cursor: pointer;
            }
          }
        }

        .title-jcsj:hover {
          cursor: pointer;
        }
      }

      // 专题数据
      .ztsj {
        .width_height(100%, 100%);

        .con {
          .width_height(100%, calc(100% - 40px));
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          .con-item {
            .width_height(33%, 48%);
            background-image: url('/src/assets/imgs/ywzl/bg.png');
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: relative;

            .con-item2 {
              font-size: 20px;
              position: absolute;
              width: 50px;
              text-align: left;
              top: 20%;
              left: 15%;
              color: #ffffff;
            }

            .con-item3 {
              position: absolute;
              width: 50px;
              height: 50px;
              top: 6%;
              right: 22%;
            }
          }
          .con-item:hover {
            cursor: pointer;
          }
        }
      }
      .sjfx {
        .width_height(100%, 100%);

        .con {
          .width_height(100%, calc(100% - 40px));
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          .con-item {
            .width_height(33%, 48%);
            background-image: url('/src/assets/imgs/ywzl/bg.png');
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: relative;

            .con-item2 {
              font-size: 20px;
              position: absolute;
              width: 50px;
              text-align: left;
              top: 20%;
              left: 15%;
              color: #ffffff;
            }

            .con-item3 {
              position: absolute;
              width: 50px;
              height: 50px;
              top: 6%;
              right: 22%;
            }
          }
          .con-item:hover {
            cursor: pointer;
          }
        }
      }
    }

    // 中间
    .center {
      .mapChart,
      .dxhd {
        .D_F_J_A(column, center, center);
      }
      // 地图
      .mapChart {
        .width_height(100%, 60%);
      }

      // 大型活动
      .dxhd {
        .width_height(100%, 15%);

        .con {
          .width_height(100%, calc(100% - 40px));
          .D_J(space-between);

          .con-item {
            .width_height(24%, 100%);
            .D_F_J_A(column, center, center);
            background-color: rgba(255, 255, 255, 0.05);

            .con-item1 {
              .width_height(50px, 50px);
            }
            .con-item2 {
              color: #ffffff;
              font-size: 16px;
              margin: 9% 0 0 0;
            }
          }

          .con-item:hover {
            cursor: pointer;
          }
        }
      }

      // 3d全景
      .threeD {
        .width_height(100%, 25%);
        display: flex;

        .con {
          .width_height(50%, 100%);
          /deep/ .tip-box {
            .width_height(100%, 20%);
            .D_J_A(space-between, center);
            color: #ffffff;
            font-size: 16px;
            font-weight: 900;
            padding: 0 1%;

            .el-select--small .el-select__wrapper {
              background-color: rgba(255, 255, 255, 0.3) !important;
              border-top-left-radius: 10px !important;
              border-bottom-right-radius: 10px !important;
            }

            .el-select__placeholder.is-transparent {
              color: white;
            }

            .el-select__placeholder {
              color: white;
            }
          }

          .ico-box {
            .width_height(95%, 70%);
            padding: 6%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.05) !important;
            img {
              .width_height(50%, 80%);
            }
          }
        }
      }
    }

    // 右边
    .right {
      .D_F_J_A(column, center, center);
      padding: 0.1% 0.5%;

      // 天气情况
      .tqqk {
        .width_height(100%, 14%);
        .con {
          .width_height(100%, 65%);
          padding: 0 1%;
          .D_J(space-between);

          .con-item {
            .width_height(24%, 85%);
            background-color: rgba(255, 255, 255, 0.4);
            border-radius: 10px;
            border: 1px solid;
            border-color: #33d2f8;

            .con-item2,
            .con-item1 {
              .width_height(100%, 30%);
              text-align: center;
              font-size: 16px;
            }
            .con-item1 {
              font-weight: 900;
              margin: 10% 0 0 0;
              color: #ffffff;
            }
            .con-item2 {
              color: #33d2f8;
              margin: 2% 0 0 0;
            }
          }
        }
      }

      // 城市之眼
      .cszy {
        .width_height(100%, 5%);
        .D_J_A(center, center);

        .cszy_img {
          width: 50%;
          height: 100%;
        }
      }

      // 视频中台
      .spzt {
        .width_height(100%, 40%);
        .con {
          .width_height(100%, calc(100% - 40px));
          background-image: url('/src/assets/imgs/ywzl/spzh.png');
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }

      // 各种视视频
      .spfl {
        .width_height(100%, 40%);
        display: flex;
        flex-wrap: wrap;

        .con {
          .width_height(50%, 50%);

          .con-item {
            .width_height(100%, (100% - 25px));
          }
        }
      }
    }

    .title-top {
      .width_height(100%, 40px);
      .D_A(center);
      padding: 0 0 0 1%;

      .title-color {
        .width_height(0.8%, 60%);
        background-color: #31a7ff;
      }

      .title-txt {
        color: #ffffff;
        margin: 0 0 0 2%;
        font-weight: 900;
      }
    }
  }
}
</style>
